/* 用户权限列表页面 */
<template>
  <div>
    <!-- 用户列表主体部分 -->
    <el-card>
      <!-- 用户列表 ,border为边框，stripe隔行变色 -->
      <el-table
        style="
          font-size: 14px;
          box-shadow: 10px 10px 5px rgba(99, 99, 153, 0.2);
        "
        :data="menuList"
        border
        stripe
        :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
      >
        <el-table-column type="index"></el-table-column>
        <el-table-column
          label="菜单名"
          prop="title"
          align="center"
        ></el-table-column>
        <el-table-column label="菜单名" prop="title" align="center">
          <!-- el-tag组件
           closable:表示可以关闭，默认值为false-->
          <el-tag
            v-for="list in menuList"
            :key="list.title"
            closable
            :type="list.type"
          >
            {{ list.title
            }}<!-- 循环list集合的名字 -->
          </el-tag>
        </el-table-column>
        <el-table-column
          label="路径URL"
          prop="path"
          align="center"
        ></el-table-column>
        <el-table-column label="状态" prop="state" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <!-- 权限 -->
          <el-tooltip
            effect="dark"
            content="分配权限"
            placement="top-start"
            :enterable="false"
            ><!--文字提示 enterable 隐藏-->
            <!-- <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
                @click="showEditDialog(scope.row.id)"
              ></el-button> -->
            <el-link icon="el-icon-edit">编辑</el-link>
          </el-tooltip>
        </el-table-column>
        <!-- 索引列 -->
      </el-table>

      <div
        class="block"
        style="
          text-align: center;
          margin-top: 15px;
          margin-left: 10px;
          padding: 10px 10px;
        "
      >
        <div>
          <el-pagination
            background
            :current-page="fromData.pageIndex"
            :page-sizes="pageInfo.pageSizes"
            :page-size="fromData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
          >
            <!-- 
               @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
              @size-change：每页显示条数个数点击事件，当切换时动态的切换每页显示的条数
               @current-change：当前页数点击事件
               current-page:当前页码，默认为第一页
               page-sizes：在页面可选择的页码数[1,10,20,50] 
               page-size：每页显示的条数，可以动态的修改
               total：显示的是从后端获得数据的总数  -->
          </el-pagination>
        </div>
      </div>
    </el-card>

    <!-- 修改对话框区域 -->
  </div>
</template>

<script>
export default {
  created() {
    this.getMenuList(); //获取当前用户列表
  },
  //数据定义
  data() {
    return {
      menuList: [], //用户列表
      fromData: {
        name: "",
        pageIndex: 1, //当前页码，为第一页
        pageSize: 5, //默认每页最大数为5，可以动态的切换每页最大数
      },
      pageInfo: {
        total: 0, //总数，初始值为0
        pageSizes: [1, 5, 10, 20], //定义每次显示最大的条数
      },
      editDialogVisible: false, //修改表单对话框状态，默认为true
    };
  },
  methods: {
    //获取所有用户，通过http请求的get方法调用后端的allUser接口方法
    async getMenuList() {
      var $that = this;
      const { data: res } = await this.$http.get("sys/user/getMenuName", {
        params: this.fromData,
      });
      this.menuList = res.data.list; //获取所有员工信息
      this.pageInfo.total = res.data.total; //获得统计后的员工总数
    },

    // /* 更改用户状态方法 */
    // async userStateChanged(userInfo) {
    //   var formData = new FormData();
    //   formData.append("id", userInfo.id);
    //   formData.append("state", userInfo.state);
    //   const { data: res } = await this.$http.put(
    //     "http://localhost:9000/sys/user/userState",
    //     formData
    //   ); //调用后台userState的接口，将信息存放在formData中
    //   const confirmResult = await this.$confirm(
    //     "此操作将更改用户状态,是否继续",
    //     "提示",
    //     {
    //       confirmButtonText: "确定",
    //       confirmButtonText: "取消",
    //       type: "warning",
    //     }
    //   ).catch((err) => err);
    //   if (res != "success" && confirmResult != "confirm") {
    //     userInfo.id = !userInfo.id;
    //     return this.$message.error("修改用户状态失败");
    //   }
    //   this.$message.success("修改用户状态成功");
    // },

    // //监听添加用户的操作，点击取消然后退出对话框
    // addDialogClosed() {
    //   this.$refs.addFormRef.resetFields(); //重置对话框
    // },
    // //关闭对话框
    // editDialogClosed() {
    //   this.$refs.editFormRef.resetFields(); //重置对框框区域信息
    // },

    // //显示对话框，关闭窗口
    // async showEditDialog(id) {
    //   const { data: res } = await this.$http.get(
    //     "http://localhost:9000/sys/user/getUpdateUser?id=" + id
    //   );
    //   this.editForm = res; //查询用户信息存放在editform中
    //   this.editDialogVisible = true; //开启编辑对话框
    // },
    // //最大数的改变， newSize：新的页码
    // handleSizeChange(newSize) {
    //   this.queryInfo.pageSize = newSize;
    //   this.getUserList(); //获取当前用户列表
    // },

    // //页面变化pageNum的触发功能，newPage：新的分页数
    // handleCurrentChange(newPage) {
    //   this.queryInfo.pageNum = newPage;
    //   this.getUserList(); //获取当前用户列表
    // },
  },
};
</script>

<style Lang="less" scoped>
</style>